<template>
  <div>
    <vxe-table v-loading="tableDataLoading" :tooltip-config="tableTooltipConfig" :element-loading-spinner="loadingSvg"
               element-loading-text="加载中..." element-loading-background="rgba(0, 0, 0, 0.8)"
               element-loading-svg-view-box="0, 0, 50, 50" border="full" height="350px" show-header-overflow
               :column-config="{resizable: true}"
               show-overflow :row-config="{isHover: true}" :data="showData">
      <vxe-column align="center" type="seq" width="60" field="序号" fixed></vxe-column>
      <vxe-column align="center" v-for="column in requestColumns" :key="column" :title="column" :field="column" sortable
                  min-width="150" :filters="[{ data: '' }]" :filter-method="filterMethod">
        <template #filter="{ $panel, column }">
          <input type="type" v-for="(option, index) in column.filters" :key="index" v-model="option.data"
                 @input="$panel.changeOption($event, !!option.data, option)" @keyup.enter="$panel.confirmFilter()"
                 placeholder="按回车确认筛选">
        </template>
      </vxe-column>
    </vxe-table>
  </div>
</template>

<script>
import { computed, defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue"
import { getETLNodeData, getETLTableData } from "../../../../service/data_etl"
import { etlArrayToTree } from "../../../../utils/tree"
import { useEtlStore } from "../../../../store/flowEtl"
import { loadingSvg } from "../../../../utils/constant"

export default defineComponent({
  name: "node-data",
  props: {
    node: Object,
    requestModal: {
      type: Boolean,
    },
    requestFlag: {
      type: Boolean,
    },
    data_etl_id: {
      type: Number,
    },
  },
  setup (props, ctx) {
    const etlStore = useEtlStore();
    const nodeList = computed(() => etlStore.nodeList)
    const lineList = computed(() => etlStore.lineList)
    const tableDataLoading = ref(false)
    const requestColumns = ref([])
    const requestData = ref([])
    const nodeDataDialog = ref(true)
    const total = ref(0)
    const showData = ref([]);
    const tableTooltipConfig = reactive({
      showAll: true,
      enterable: true,
      contentMethod: ({ type, column, row, items, _columnIndex }) => {
        const { property } = column
        // 重写默认的提示内容
        if (property === "role" || property === "date") {
          if (type === "header") {
            return column.title ? column.title : ""
          }
          return row[property] ? row[property] : ""
        }
        // 其余的单元格使用默认行为
        return null
      }
    })
    // 查看数据
    const handleShowData = () => {
      getETLTableData({
        data_etl_id: props.data_etl_id,
        table: props.node.config.table,
        fields: props.node.config.fields,
        limit: props.node.config.limit,
      }).then((res) => {
        requestData.value = res.data
        total.value = res.data.length
        showData.value = requestData.value
        tableDataLoading.value = false
      })
    }
    const handleEtlNodeData = () => {
      let node = JSON.parse(JSON.stringify(props.node))
      let nodeTree = etlArrayToTree(
          lineList.value,
          props.node.id,
          "from",
          "to",
          nodeList.value
      )
      node.children = nodeTree
      getETLNodeData({
        data_etl_id: props.data_etl_id,
        node: JSON.stringify(node),
      }).then((res) => {
        requestData.value = res.data
        total.value = res.data.length
        showData.value = requestData.value
        tableDataLoading.value = false
      })
    }
    const handleInit = () => {
      if (!props.node.id) return
      tableDataLoading.value = true
      requestData.value = []
      total.value = 0
      showData.value = []
      requestColumns.value = props.node.config.fields.map((item) => {
        return item.alias
      })
      if (props.node.type === "input") {
        handleShowData()
      } else {
        handleEtlNodeData()
      }
    }
    const filterMethod = ({ option, row, column }) => {
      if (row[column.field]) {
        switch (typeof row[column.field]) {
          case "number":
          case "bigint":
            return row[column.field] === Number(option.data)
            break;
          case "string":
            return row[column.field].includes(option.data)
            break;
          default:
            return false;
            break;
        }
      } else {
        return false
      }
    }
    watch(
        () => props.requestFlag,
        (nv) => {
          if (!nv) {
            return false
          }
          handleInit();
        }
    )
    onMounted(() => {
      nextTick(() => {
        handleInit()
      })
    })
    return {
      total,
      requestColumns,
      requestData,
      showData,
      nodeDataDialog,
      nodeList,
      lineList,
      loadingSvg,
      tableDataLoading,
      handleInit,
      handleShowData,
      handleEtlNodeData,
      filterMethod,
      tableTooltipConfig,
    }
  },
})
</script>
